<!DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <link href="__PUBLIC__/js/themes/default/easy_ui.css" rel="stylesheet" type="text/css" />
        <link href="__PUBLIC__/js/themes/icon.css" rel="stylesheet" type="text/css" />
        <link href="__PUBLIC__/css/demo.css" rel="stylesheet" type="text/css" />
        <script src="__PUBLIC__/js/jquery-1.8.0.min.js" type="text/javascript"></script>
        <script src="__PUBLIC__/js/jquery.easyui.min.js" type="text/javascript"></script>
        <script>
            $(function() {
                loadData();
                $('#QuestForm').dialog({
                    title: '添加问题',
                    width: 650,
                    height: 250,
                    closed: true,
                    cache: false,
                    resizable: true,
                    modal: true,
                    buttons: [{
                            text: '确定',
                            iconCls: 'icon-ok',
                            handler: function() {
                                var datas = {questionId: Id, question: $("#txtQuestion").val(), answer: $("#txtAnswer").val()};
                                var url = "{:U('CommonQuestion/addQuestion')}";
                                if (Id != "") {
                                    url = "{:U('CommonQuestion/updateQuestion')}";
                                }
                                $.post(url, datas, function(data) {
                                    if (data == 'y') {
                                        $("#QuestForm").window("close");
                                        $("#tbGrid").datagrid("reload", {});
                                    }
                                    else {
                                        alert("保存失败!");
                                    }
                                });
                            }
                        }, {
                            text: '取消',
                            iconCls: 'icon-cancel',
                            handler: function() {
                                $("#QuestForm").window("close");
                            }
                        }]
                });
            });
            function loadData() {
                var param = {
                };
                $('#tbGrid').datagrid({
                    title: '问题列表',
                    iconCls: 'icon-save',
                    width: '80%',
                    height: 'auto',
                    nowrap: false,
                    striped: true,
                    url: "{:U('CommonQuestion/getQuestions')}",
                    queryParams: param,
                    columns: [[
                            {field: 'ID', hidden: true},
                            {field: 'Question', title: '问题', width: 400, align: 'left'},
                            {field: 'Answer', title: '答案', width: 800, align: 'left'}
                        ]],
                    toolbar: [{
                            id: 'btnadd',
                            text: '添加',
                            iconCls: 'icon-add',
                            handler: function() {
                                add();
                            }
                        }, {
                            id: 'btncut',
                            text: '修改',
                            iconCls: 'icon-edit',
                            handler: function() {
                                edit();
                            }
                        }, '-', {
                            id: 'btnsave',
                            text: '删除',
                            iconCls: 'icon-remove',
                            handler: function() {
                                if (confirm("确定要删除该问题吗?")) {
                                    del();
                                }
                            }
                     }]
                });
            }

            function add() {
                $("#txtQuestion").val('');
                $("#txtAnswer").val('');
                Id = "";
                $("#QuestForm").dialog('setTitle', '添加');
                $("#QuestForm").window("open");
            }
            var Id = "";
            function edit() {
                var rows = $('#tbGrid').datagrid('getSelected');
                if (rows == null || rows == undefined) {
                    alert("请选择行");
                    return;
                }
                Id = rows.ID;
                $("#txtQuestion").val(rows.Question);
                $("#txtAnswer").val(rows.Answer);
                $("#QuestForm").dialog('setTitle', '编辑');
                $("#QuestForm").window("open");
            }

            function del() {
                var rows = $('#tbGrid').datagrid('getSelected');
                if (rows == null || rows == undefined) {
                    alert("请选择需要删除的行");
                    return;
                }
                $.post("{:U('CommonQuestion/deleteQuestion')}", {questionId: rows.ID}, function(data) {
                    if (data == 'y') {
                        $("#tbGrid").datagrid("reload", {});
                    }
                    else {
                        alert("删除失败!");
                    }
                });
            }

        </script>
        <style>
            .input240
            {
                width: 580px;
                height: 22px;
                line-height: 22px;
                border: 1px solid #95B8E7;
                margin-left: 20px;
            }
            .txtRemark
            {
                width: 580px;
                border: 1px solid #95B8E7;
                margin-left: 20px;
                height: 75px;
            }
        </style>
    </head>
    <body>
        <div data-options="region:'center',title:'常见问题'">
            <table class="easyui-datagrid" id="tbGrid" singleselect="true">  
            </table>
        </div>
        <div id="QuestForm">
            <table>
                <tr>
                    <td colspan="2">
                        <span style=" margin-left: 20px;">问题</span>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="text" id="txtQuestion" name="txtQuestion" class="easyui-validatebox input240" data-options="required:true,missingMessage:'必填'">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <span style=" margin-left: 20px">答案</span>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <textarea id="txtAnswer" name="txtAnswer" class="txtRemark"></textarea>
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>
